<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <div class="welcome-section">
          <div class="welcome-content">
            <div class="welcome-title-wrapper">
              <h2 class="welcome-title">知医系统</h2>
              <div class="title-decoration"></div>
            </div>
            <div class="welcome-description">
              <p class="description-main">为异地就医患者打造的权威医疗资源精准匹配平台。</p>
              <p class="description-sub">通过微信小程序，我们帮助用户高效锁定一线城市中最适合治疗其病症的顶尖医院与医生，让优质医疗触手可及。</p>
            </div>
          </div>
        </div>
        <hr />
      </el-col>
    </el-row>

    <!-- 数据统计卡片 -->
    <el-row :gutter="20">
      <el-col :sm="24" :lg="6">
        <el-card class="box-card">
          <div class="card-header">
            <span>医院总数</span>
          </div>
          <div class="card-body">
            <count-to :start-val="0" :end-val="hospitalCount" :duration="2000" class="card-number"/>
            <div class="card-footer">
              <span>家</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="6">
        <el-card class="box-card">
          <div class="card-header">
            <span>科室总数</span>
          </div>
          <div class="card-body">
            <count-to :start-val="0" :end-val="departmentCount" :duration="2000" class="card-number"/>
            <div class="card-footer">
              <span>个</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="6">
        <el-card class="box-card">
          <div class="card-header">
            <span>医生总数</span>
          </div>
          <div class="card-body">
            <count-to :start-val="0" :end-val="doctorCount" :duration="2000" class="card-number"/>
            <div class="card-footer">
              <span>位</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="6">
        <el-card class="box-card">
          <div class="card-header">
            <span>房屋总数</span>
          </div>
          <div class="card-body">
            <count-to :start-val="0" :end-val="housesCount" :duration="2000" class="card-number"/>
            <div class="card-footer">
              <span>套</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表展示 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :sm="24" :lg="12">
        <el-card>
          <div slot="header">
            <span>科室分布</span>
          </div>
          <pie-chart :chart-data="pieChartData" />
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12">
        <el-card>
          <div slot="header">
            <span>医生职称分布</span>
          </div>
          <bar-chart :chart-data="barChartData" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import PieChart from '@/views/dashboard/PieChart'
import BarChart from '@/views/dashboard/BarChart'
import request from '@/utils/request'

export default {
  name: 'Index',
  components: {
    CountTo,
    PieChart,
    BarChart
  },
  data() {
    return {
      version: '3.8.8',
      hospitalCount: 0,
      departmentCount: 0,
      doctorCount: 0,
      housesCount: 0,
      // 饼图数据
      pieChartData: {
        title: {
          text: '科室分布',
          left: 'left',
          top: 10,
          textStyle: {
            fontSize: 16,
            fontWeight: 'normal',
            color: '#606266'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: '#eee',
          borderWidth: 1,
          textStyle: {
            color: '#606266'
          }
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: 'center',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#606266',
            fontSize: 12
          }
        },
        series: [
          {
            name: '医生数量',
            type: 'pie',
            radius: ['45%', '70%'],
            center: ['40%', '50%'],
            data: [],
            color: [
              {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{ offset: 0, color: '#409EFF' }, { offset: 1, color: '#67C23A' }]
              },
              {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{ offset: 0, color: '#67C23A' }, { offset: 1, color: '#85CE61' }]
              },
              {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{ offset: 0, color: '#909399' }, { offset: 1, color: '#A6A9AD' }]
              },
              {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{ offset: 0, color: '#E6A23C' }, { offset: 1, color: '#F0B85C' }]
              }
            ],
            emphasis: {
              scale: true,
              scaleSize: 5,
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.1)'
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{d}%',
              fontSize: 12,
              color: '#606266'
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10,
              smooth: true,
              lineStyle: {
                color: '#ddd'
              }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function(idx) {
              return idx * 100
            }
          }
        ]
      },
      // 柱状图数据
      barChartData: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: '#eee',
          borderWidth: 1,
          textStyle: {
            color: '#606266'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['主任医师', '副主任医师', '主治医师', '住院医师'],
          axisLabel: {
            interval: 0,
            rotate: 30,
            color: '#606266'
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '人数',
          nameTextStyle: {
            align: 'right',
            padding: [0, 0, 0, 40],
            color: '#606266'
          },
          axisLabel: {
            color: '#606266'
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [
          {
            name: '医生人数',
            type: 'bar',
            barWidth: '60%',
            data: [],
            itemStyle: {
              color: new Function('params', `
                const colorList = [
                  {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [{offset: 0, color: '#409EFF'}, {offset: 1, color: '#67C23A'}]
                  },
                  {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [{offset: 0, color: '#67C23A'}, {offset: 1, color: '#85CE61'}]
                  },
                  {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [{offset: 0, color: '#909399'}, {offset: 1, color: '#A6A9AD'}]
                  },
                  {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [{offset: 0, color: '#E6A23C'}, {offset: 1, color: '#F0B85C'}]
                  }
                ]
                return colorList[params.dataIndex]
              `)
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}',
              fontSize: 12,
              color: '#606266'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.1)'
              }
            },
            animationDelay: function(idx) {
              return idx * 100
            }
          }
        ]
      }
    }
  },
  created() {
    this.getStatistics()
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    },
    // 获取统计数据
    getStatistics() {
      // 获取医院总数
      request.get('/system/hospital/list').then(response => {
        this.hospitalCount = response.total
      })
      // 获取房屋总数
      request.get('/system/houses/list').then(response => {
        this.housesCount = response.total
      })

      // 并行获取科室和医生数据
      Promise.all([
        // 获取全部科室（分页参数确保获取全部数据）
        request.get('/system/department/list', {
          params: {
            pageNum: 1,
            pageSize: 1000 // 确保获取所有科室
          }
        }),
        // 获取全部医生（分页参数确保获取全部数据）
        request.get('/system/doctor/list', {
          params: {
            pageNum: 1,
            pageSize: 1000 // 确保获取所有医生
          }
        })
      ]).then(([deptResponse, doctorResponse]) => {
        this.departmentCount = deptResponse.total
        this.doctorCount = doctorResponse.total
        const departments = deptResponse.rows
        const doctors = doctorResponse.rows

        // 1. 构建饼图数据
        // 使用Map确保科室名称唯一性
        const departmentMap = new Map()
        departments.forEach(dept => {
          departmentMap.set(dept.id, dept.name)
        })

        // 统计各科室医生数量
        const deptCountMap = new Map()
        doctors.forEach(doctor => {
          const deptName = departmentMap.get(doctor.departmentId)
          if (deptName) {
            deptCountMap.set(deptName, (deptCountMap.get(deptName) || 0) + 1)
          }
        })
        // 转换为饼图所需格式
        const pieData = []
        deptCountMap.forEach((count, name) => {
          pieData.push({ value: count, name: name })
        })

        // 更新饼图数据
        this.pieChartData.series[0].data = pieData

        // 2. 构建柱状图数据
        const jobTitles = ['主任医师', '副主任医师', '主治医师', '住院医师']
        const barData = Array(jobTitles.length).fill(0)

        // 统计各职称医生数量
        doctors.forEach(doctor => {
          const index = jobTitles.indexOf(doctor.jobTitle)
          if (index !== -1) {
            barData[index] += 1
          }
        })

        // 更新柱状图数据
        this.barChartData.series[0].data = barData
      })
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  .welcome-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #409EFF, #67C23A);
    }
    .welcome-content {
      text-align: center;
      position: relative;
      z-index: 1;
      .welcome-title-wrapper {
        margin-bottom: 30px;
        position: relative;

        .welcome-title {
          font-size: 32px;
          background: linear-gradient(120deg, #409EFF, #67C23A);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-bottom: 15px;
          font-weight: 600;
          letter-spacing: 2px;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        .title-decoration {
          width: 60px;
          height: 3px;
          background: linear-gradient(90deg, #409EFF, #67C23A);
          margin: 0 auto;
          border-radius: 3px;
        }
      }
      .welcome-description {
        max-width: 800px;
        margin: 0 auto;
        .description-main {
          font-size: 18px;
          line-height: 1.8;
          color: #303133;
          margin-bottom: 15px;
          font-weight: 500;
        }
        .description-sub {
          font-size: 16px;
          line-height: 1.8;
          color: #606266;
          letter-spacing: 0.5px;
        }
      }
    }
  }

  hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #ebeef5;
  }

  .col-item {
    margin-bottom: 20px;
  }

  .box-card {
    .card-header {
      font-size: 14px;
      color: #666;
    }
    .card-body {
      padding: 20px 0;
      .card-number {
        font-size: 24px;
        font-weight: bold;
        color: #409EFF;
      }
      .card-footer {
        margin-top: 10px;
        font-size: 14px;
        color: #999;
      }
    }
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

